<template>
  <div class="warp">
    <TopHeader></TopHeader>
    <div class="setView">
      <div class="row border-bottom fontB colorGreen">
        自動計画条件設定
      </div>
      <div class="row border-bottom">
        <span class="label">装置</span><el-input readonly disabled>xxxx</el-input>
      </div>
      <div class="row">
        <el-button class="bg-bottom-btn">
          + 新規
        </el-button>
        <button><i class="el-icon-caret-top"></i></button>
        <button><i class="el-icon-caret-bottom"></i></button>
      </div>

      <div class="tableView">

        <ux-grid ref="multipleTable" :data="tableData" style="width: 100%;" border="false" :header-cell-style="{
          color: 'rgba(0, 0, 0)',
          fontSize: '14px',
          textAlign: 'center',
          fontWeight: '700',
          padding: 0,
          height: '50px',
        }" :cell-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14px',
                textAlign: 'left',
                padding: 0,
                height: '50px',
                borderBottom: '1px solid #d9d9d9'
              }" :row-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14xpx',
                textAlign: 'left',
                padding: 0,
                height: '50px',
              }" @selection-change="handleSelectionChange" :element-loading-text="$t('message.bhView.loading')">
          <!-- <template slot="empty"> No data </template> -->
          <ux-table-column property="list1" title="抽出条件名称" width="450" fixed="left">
            <template slot-scope="scope">
              <p>{{ scope.row.list1 }}</p>
            </template>
          </ux-table-column>
          <ux-table-column property="list2" title="計画種別" width="200" fixed="left">
            <template slot-scope="scope">
              <p>{{ scope.row.list2 }}</p>
            </template>
          </ux-table-column>

          <ux-table-column property="list3" title="表示順" width="200">
            <template slot-scope="scope">
              <p>{{ scope.row.list3 }}</p>
            </template>
          </ux-table-column>

          <ux-table-column property="list4" title="操作">
            <template slot-scope="scope">
              <p style="color:#BC000F;">削除</p>
            </template>
          </ux-table-column>


        </ux-grid>


        <div class="tabsView">
          <div class="tabs row">
            <button :class="activeTab == 1 ? 'bg-bottom-btn' : 'bottom-btn'" @click="changeTabs(1)">
              抽出条件（仕様）
            </button>
            <button :class="activeTab == 2 ? 'bg-bottom-btn' : 'bottom-btn'" @click="changeTabs(2)">
              抽出条件（寿命）
            </button>
          </div>

          <div class="content">
            <TAB1 v-if="activeTab == 1"></TAB1>
            <TAB2 v-if="activeTab == 2"></TAB2>
          </div>

          <div class="TABSbottom tabs row">
            <button class="bottom-btn">
              Cancel
            </button>
            <button class="bg-bottom-btn">
              OK
            </button>
          </div>
        </div>
      </div>

      <div class="row">
        <el-button class="bottom-btn">
          编集をキャンセル
        </el-button>
        <el-button class="bg-bottom-btn">
          编集内容を保存
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>
import TopHeader from "@/components/header/Head.vue";
import TAB1 from "./tabs/tab1.vue";
import TAB2 from "./tabs/tab2.vue";

export default {
  name: "PlanAutoSet",
  data() {
    return {
      activeTab: 1,
      tableData: [{
        list1: '全測定点：CBM計画（寿命評価係数は、測定点ごとの値を採用）',
        list2: 'CBM',
        list3: '1',
        list4: '消除',
      }, {
        list1: '定点：C.R < 0.1  →  144か月（最終検査基準）',
        list2: 'CBM',
        list3: '1',
        list4: '消除',
      }, {
        list1: '全測定点：C.R < 0.2mm/y  →  96か月（最終検査基準）',
        list2: 'CBM',
        list3: '1',
        list4: '消除',
      }, {
        list1: '移動点以外：C.R ≥ 0.2mm/y  →  48か月（最終検査基準）',
        list2: 'CBM',
        list3: '1',
        list4: '消除',
      }, {
        list1: '全測定点：R.L < 8年  →  48か月（最終検査基準）',
        list2: 'CBM',
        list3: '1',
        list4: '消除',
      }]
    };
  },
  components: {
    TopHeader,
    TAB1,
    TAB2
  },
  watch: {},
  methods: {
    changeTabs(index) {
      this.activeTab = index;
    },
    Del(row) {
      console.log(row)
    },
    handleSelectionChange(e) {
      console.log("handleSelectionChange", e)
    },
  },
  created() { },
  mounted() {
    console.log("plan")
  },
  updated() {
    // 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
    var elements = document.querySelectorAll('.elx-cell--checkbox');

    // 遍历这些元素  
    elements.forEach(function (element) {
      // 修改每个元素的title属性  
      element.setAttribute('title', '');
    })
  },
  beforeDestroy() { },
  destroyed() { }
};
</script>
<style lang="scss" scoped>
.warp {
  height: 100vh;
}

.setView {
  height: calc(100% - 40px);
  max-height: calc(100% - 40px);
  background-color: #F8F8F8;
  overflow: hidden;
  padding: 20px 25px 0;

  .row {
    display: flex;
    padding: 12px 0;

    .label {
      display: inline-block;
      width: 50px;
    }

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 1px solid #d9d9d9;
      margin-left: 8px;
      border-radius: 4px;
      font-size: 18px;
    }

    .bottom-btn {
      width: auto;
      padding: 0 12px;
      margin-right: 10px;
    }

    .bg-bottom-btn {
      width: auto;
      background: #106ebe;
      color: #ffffff;
      padding: 0 12px;
      margin-right: 10px;
    }

    ::v-deep .el-input__inner {
      width: 224px;
      height: 24px;
      color: rgba(0, 0, 0, 0.65);
      background: #f8f8f8;
    }
  }

  .tableView {
    border: 1px solid #d9d9d9;
    height: calc(100% - 220px);
    display: flex;

    .tabsView {
      width: 670px;
      background-color: #f8f8f8;
      border-left: 1px solid rgb(217, 217, 217);

      .tabs {
        padding: 16px;

        button {
          width: 50%;
          padding: 0;
          margin: 0;
          border-radius: 0;
        }
      }

      .content {
        width: 650px;
        height: calc(100% - 115px);
        overflow-y: scroll;
        padding: 0 16px 15px 16px;
      }

      .TABSbottom {
        height: 48px;
        // background-color: red;
        border-top: 1px solid rgba(0, 0, 0, 0.35);
        padding: 8px 16px;

        button {
          height: 32px;
          // line-height: 32px;
          text-align: center;
          width: auto;
          padding: 2px 15px;
          border-radius: 4px;
          margin-right: 8px;
        }

        .bg-bottom-btn {
          background: #106ebe;
        }
      }
    }
  }
}

.colorGreen {
  color: #106EBE;
}

.fontB {
  font-weight: bold;
}

.border-bottom {
  border-bottom: 1px solid #D8D8D8;
}


::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .plTableBox {
  height: 50px;
}

::v-deep .el-table {
  background-color: #f8f8f8;
}

::v-deep .elx-table--body-wrapper {
  background-color: #f8f8f8;
}

::v-deep .el-table__body .el-table__row td:last-child .cell {
  color: #BC000F;
}

::v-deep .elx-body--row {
  cursor: pointer;
}

button {
  font-size: 14px !important;
}
</style>
